<template>
  <div class="recipe-detail-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="食谱详情"
      left-arrow
      @click-left="onBack"
      fixed
      placeholder
      :border="false"
      :safe-area-inset-top="true"
    />
    <!-- 食谱内容 -->
    <div class="recipe-content" v-if="recipe">
      <img :src="recipe.img" class="recipe-cover" />
      
      <div class="recipe-header">
        <h1 class="recipe-title">{{ recipe.name }}</h1>
        <div class="recipe-meta">
          <span class="meta-item">
            <van-icon name="clock-o" />
            {{ recipe.time }}分钟
          </span>
          <span class="meta-item">
            <van-icon name="fire-o" />
            {{ recipe.kcal }}大卡
          </span>
        </div>
      </div>

      <!-- 制作教程 -->
      <div class="recipe-section" v-if="recipe.instructions">
        <h2 class="section-title">制作教程</h2>
        <div class="instructions">
          {{ recipe.instructions }}
        </div>
      </div>

      <!-- 教学视频 -->
      <div class="recipe-section" v-if="recipe.videoUrl">
        <h2 class="section-title">教学视频</h2>
        <div class="video-container">
          <a :href="recipe.videoUrl" target="_blank" class="video-link">
            <van-button type="primary" block>观看教学视频</van-button>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { db, STORES } from '../utils/db'

const router = useRouter()
const route = useRoute()
const recipe = ref(null)

onMounted(async () => {
  const recipeName = route.params.name
  try {
    recipe.value = await db.get(STORES.RECIPES, recipeName)
  } catch (error) {
    console.error('获取食谱详情失败:', error)
  }
})

const onBack = () => {
  router.back()
}
</script>

<style scoped>
.recipe-detail-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #e9eafc 0%, #e6e6fa 100%);
  padding-bottom: 20px;
}

.recipe-content {
  padding: 16px;
}

.recipe-cover {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 20px;
}

.recipe-header {
  background: #fff;
  padding: 20px;
  border-radius: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.recipe-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
}

.recipe-meta {
  display: flex;
  gap: 20px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #666;
  font-size: 14px;
}

.recipe-section {
  background: #fff;
  padding: 20px;
  border-radius: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 16px;
}

.instructions {
  color: #666;
  line-height: 1.6;
  font-size: 15px;
}

.video-container {
  margin-top: 12px;
}

.video-link {
  text-decoration: none;
}
</style> 